<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script  src="js/jquery.min.js"></script>
    <style>
        .box{
            width: 600px;
            height: 90px;
            background-color: greenyellow;
            display: none;
        }
    </style>
</head>
<body>
    <h1>
        父
        parent()
        parents()
        parentsUntil()
        子
        childern() 所有子元素
        find

        clone() 克隆
    </h1>
    名字<input type="text"/><br>
    内容<textarea></textarea><br>
        <div>
            <ul>
                <li>temo</li>
                <li id="jian">剑圣</li>
                <li>狗头</li>
                <li class="ss">EZ</li>
                <li class="ss">VN</li>
            </ul>
        </div>
        <div class="box">
            <h4>标题</h4>
            <p>详细内容</p>

        </div>
        <a>显示</a>
</body>
<script>
    $(function(){
    //    var sz=$("div").find();
   var obj=$("div").find("#jian");
       console.log(obj);
       $("a").click(function(){
           var s=$(".box").eq(0).clone().css("display","block");
           var mz=$("input").val();
           var p=$("textarea").val();
           s.find("h4").text(mz);
           s.find("p").text(p);
           $("body").append(s)
       })
    })
</script>
</html>